<!--
 * @Descripttion: sku的规格展示
 * @version:
 * @Author: cxguo
 * @Date: 2019-10-30 21:29:17
 * @LastEditors: cxguo
 * @LastEditTime: 2020-12-24 21:39:40
 -->
<template>
  <div>
    <div class="clearfix">
      <div class="fl">
        <h3 style="display: inline-block">规格信息</h3>
        <el-checkbox v-model="dataObj.isEnableSpecs" true-label="1" false-label="0" border>开启多规格</el-checkbox>
      </div>
      <el-button class="fr" type="text" @click="btnSetupSpecs">规格设置</el-button>
    </div>
    <el-divider />
    <el-form
      ref="goodInfoForm"
      :model="dataObj"
      :label-position="'left'"
      label-width="60px"
    >
      <div v-if="dataObj.isEnableSpecs === '0'" class="w300 paddingTb20">
        <el-form-item label="规格:" prop="specs">
          <el-input v-model="dataObj.specs" />
        </el-form-item>
      </div>
      <!-- specsData: {{ specsData }} -->
      <div v-if="dataObj.isEnableSpecs === '1'" class="specs paddingTb20">
        <el-form-item v-for="(specsObj,index) in specsData" :key="`${index}`" :label="`${specsObj.name}: `">
          <el-radio-group v-model="specsObj.valueData">
            <el-radio-button v-for="(item, cindex) in specsObj.children " :key="`${cindex}`" :label="item.name" />
          </el-radio-group>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>

import { oftenuse } from '@/libs/mixins'
import { specs } from './mixins'
// import { listData as getData } from '@/api/bsd/specs.js'

export default {
  name: 'GoodSpecs',
  mixins: [oftenuse],
  props: {
    /**
     * sku的规格
     */
    skuSpecsData: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      specsData: [],
      dataObj: { isEnableSpecs: '0' },
      skuCode: ''
    }
  },
  computed: {
    /**
     * 选中的规格
     */
    selectSpecsData: function() {
      return []
      if (this.dataObj.isEnableSpecs === '1') {
        const specsData = this.specsData
        const hasValueSpecs = specsData.filter(item => { return item.valueData && item.valueData.length > 0 })
        const result = []
        hasValueSpecs.forEach(item => {
          const obj = {}
          obj[item.id] = item.valueData
          result.push(obj)
        })
        return result
      }
      const specsValue = this.dataObj.specs
      if (specsValue) return [{ '默认': [specsValue] }]
      return []
    }
  },
  watch: {
    // 'skuSpecsData': {
    //   handler(data) {
    //     this.setData(data)
    //   },
    //   immediate: true
    // },
    // 'specsData': {
    //   handler() {
    //     const data = this.skuSpecsData
    //     this.setData(data)
    //   },
    //   immediate: true
    // }
  },
  created() {
    // this.getSpecsSelectData(false)
  },
  methods: {
    btnSetupSpecs() {
      this.$router.push({ name: 'SpecsList' })
    },
    // export api
    getSpecsData() {
      if (this.dataObj.isEnableSpecs === '1') {
        const specsData = this.specsData
        const result = {}
        specsData.forEach(item => {
          result[item.id] = item.valueData
        })
        return JSON.stringify(result)
      }
      return this.dataObj.specs
    },
    getIsEnableSpecs() {
      return this.dataObj.isEnableSpecs
    },
    valiData() {
      const selectSpecsData = this.selectSpecsData
      const that = this
      return new Promise((resolve, reject) => {
        if (selectSpecsData.length) {
          resolve()
        } else {
          const MSG = '至少选择一个规格！'
          that.$message.error(MSG)
          reject(new Error(MSG))
        }
      })
    },
    setData({ isEnableSpecs, specsValueData }) {
      this.$set(this.dataObj, 'isEnableSpecs', isEnableSpecs)
      if (isEnableSpecs === '1') {
        const specsValue = JSON.parse(specsValueData)
        const specsKeys = Object.keys(specsValue)
        const specsData = this.specsData
        specsData.forEach(item => {
          const index = specsKeys.indexOf(item.id)
          if (index > -1) {
            const key = specsKeys[index]
            item.valueData = specsValue[key]
          }
        })
      } else {
        this.$set(this.dataObj, 'specs', specsValueData)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .el-divider--horizontal{
    margin: 5px 0;
  }
  .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    margin-bottom: 10px;
  }
  .specs{
    position: relative;
    .sync{
      position: absolute; right: 0; bottom:10px; z-index: 10;
    }
  }
</style>
